<template v-cloak>
  <view class="detail">
    <view class="detail-image">
      <image :src="image" mode="heightFix"></image>
    </view>
    <view class="operation flex-around">
      <view class="back" @click="HandleNavBack">
        <view class="image">
          <image src="/static/pxc/back.png" mode="widthFix"></image>
        </view>
        <view class="title">返回</view>
      </view>
      <view class="down" @click="download">
        <view class="image"
          ><image src="/static/pxc/down.png" mode="widthFix"></image
        ></view>
        <view class="title">下载</view>
      </view>
      <view class="share">
        <button open-type="share" hover-class="none">
          <view class="image"
            ><image
              class="share-btn"
              mode="aspectFill"
              src="/static/pxc/share.png"
            ></image
          ></view>
        </button>
        <view class="title">分享</view>
      </view>
    </view>
    <view class="date">
      <view class="time">
        {{ nowTime }}
      </view>
      <view class="date-week">
        <text>{{ nowDate }}</text
        ><text style="margin-left: 10upx">{{ nowWeek }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // image:"https://creater-1300507222.cos.ap-beijing.myqcloud.com/1643377998256.jpg",
      image: "",
      nowDate: "", // 当前日期
      nowTime: "",
      nowWeek: "",
    }
  },
  onLoad(options) {
    this.image = options.image
  },
  methods: {
    HandleNavBack() {
      uni.navigateBack({})
    },
    //下载图片
    download() {
    	let that = this
    	uni.getSetting({
    	  success(res) {
    		if(!res.authSetting['scope.writePhotosAlbum']) {
    		  uni.authorize({
    			scope: 'scope.writePhotosAlbum',
    			success(res) {
    				that.downloadImg(that.image)
    			},
    			fail(err) {
    			  console.log(err);
            //  这里在电脑端出现了问题 我就再判断一下 真机的我只判断了authorize:fail auth deny 这是真机上返回的错误
    			  if(err.errMsg == 'authorize:fail auth deny'|| err.errMsg=='authorize:fail 系统错误，错误码：-12006,auth deny') {
    				uni.showModal({
    					title: '授权提示',
    					content: '是否允许获取保存相册权限',
    					success: (res) => {
    					  if (res.confirm) { // 点击确定，则调用相册授权
    						wx.openSetting({
    						  success(settingdata) {
                    console.log(settingdata,78)
                   if(settingdata.authSetting["scope.writePhotosAlbum"]){
    								uni.showToast({
    									title: '授权成功'
    								});
    							}
                  else {
    							    uni.showToast({
    								  title: '请确定已打开保存权限',
    								  icon: "none"
    								});
    							}
    						  }
    						})
    					   }
    					}
    				})
    			   }
    			}
    		  })
    		} else {
    			that.downloadImg(that.image)
    		}
    	   }
    	  })
    	},
       //图片保存到本地
    	downloadImg() {
    		uni.downloadFile({
    		  url:this.image,
    		  success: (res) => {
    			if (res.statusCode === 200) {

    				// this.save(res.tempFilePath)
    				uni.saveImageToPhotosAlbum({
    				    filePath: res.tempFilePath,
    					success: () => {

    					wx.showToast({
    					                  title: "下载成功",
    					                  icon: "success",
    					                  duration: 2000,
    					                })
    					},
    					fail: () => {

    					                 wx.showToast({
    					                   title: "取消下载",
    					                   icon: "none",
    					                   duration: 2000,
    					                 })
    					}
    				});
    		    }
    		 }
    	  })
    	},
    // downloadImg(url) {
    //   console.log(url) //触发函数
    //   uni.showModal({
    //     title: "提示",
    //     content: "确定要保存图片到相册",
    //     success: function (res) {
    //       if (res.confirm) {
    //         wx.downloadFile({
    //           url, //需要下载的图片url
    //           success(res) {
    //             //成功后的回调函数
    //             wx.saveImageToPhotosAlbum({
    //               //保存到本地
    //               filePath: res.tempFilePath,
    //               success(res) {
    //                 wx.showToast({
    //                   title: "下载成功",
    //                   icon: "success",
    //                   duration: 2000,
    //                 })
    //               },
    //               fail(err) {
    //                 wx.showToast({
    //                   title: "取消下载",
    //                   icon: "none",
    //                   duration: 2000,
    //                 })
    //                 if (
    //                   err.errMsg === "saveImageToPhotosAlbum:fail auth deny"
    //                 ) {
    //                   wx.openSetting({
    //                     success(settingdata) {
    //                       console.log(settingdata)
    //                       if (
    //                         settingdata.authSetting["scope.writePhotosAlbum"]
    //                       ) {
    //                         console.log(
    //                           "获取权限成功，给出再次点击图片保存到相册的提示。"
    //                         )
    //                       } else {
    //                         wx.showToast({
    //                           title: "取消下载",
    //                           icon: "none",
    //                           duration: 2000,
    //                         })
    //                       }
    //                     },
    //                   })
    //                 }
    //               },
    //             })
    //           },
    //         })
    //       } else if (res.cancel) {
    //         wx.showToast({
    //           title: "取消下载",
    //           icon: "none",
    //           duration: 2000,
    //         })
    //       }
    //     },
    //   })
    // },
    currentTime() {
      setInterval(this.formatDate, 500)
    },
    formatDate() {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let week = date.getDay() // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ]
      let hour = date.getHours() // 时
      hour = hour < 10 ? "0" + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? "0" + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? "0" + second : second // 如果只有一位，则前面补零
      this.nowDate = `${month}月${day}日`
      this.nowTime = `${hour}:${minute}`
      this.nowWeek = `${weekArr[week]}`
    },
  },
  mounted() {
    this.currentTime()
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  },
}
</script>
<style>
button {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border-radius: 5px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: block;
  /* font-size: 18px; */
  line-height: 2.55555556;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  border: none;
  /* width: 55upx; */
  /* height: 55upx; */
  display: block;
}
button::after {
  border: 1px solid transparent;
  border-radius: 0;
  box-sizing: border-box;
  content: " ";
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-left-color: rgba(0, 0, 0, 0.2);
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
</style>
<style lang="scss" scoped>
.detail {
  width: 100%;
  // height: 100vh;
  .detail-image {
    width: 100%;
    height: 100vh;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.operation {
  position: fixed;
  width: 90vw;
  bottom: 100upx;
  padding: 4upx 0;
  border-radius: 40upx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  .image {
    width: 42upx;
    height: 42upx;
    margin: 0 auto;
    image {
      width: 42upx;
      height: 42upx;
      vertical-align: top;
    }
  }
  .share-btn {
    margin-top: 2upx;
  }
  .title {
    font-size: 24upx;
    text-align: center;
    color: #fff;
  }
}
.date {
  position: fixed;
  top: 36vw;
  left: 50%;
  transform: translateX(-50%);
  .time {
    color: #fff;
    font-size: 140upx;
  }
  .date-week {
    color: #fff;
    font-size: 28upx;
    text-align: center;
  }
}
</style>
